<script>
export default {
  name: "TipTableColumn",
  props: {
    label: {
      type: String
    },
    icon: {
      type: String,
      default: "el-icon-warning-outline"
    },
    tip: {
      type: String
    },
    tipPosition: {
      type: String
    },
    tipEffect: {
      type: String,
      default: "dark"
    }
  },
  render() {
    return (
      <el-table-column {...{ attrs: this.$attrs,on: this.$listeners }}
        scopedSlots={{
          ...this.$scopedSlots,
          header: (scope) => {
            return (
              <div>
                {this.label}
                <el-tooltip
                  content={this.tip}
                  placement={this.tipPosition}
                  effect={this.tipEffect}
                >
                  <span class={this.icon} />
                </el-tooltip>
              </div>
            );
          }
        }}
      >
      </el-table-column>
    );
  }
};
</script>

<style lang="scss" scoped>
.el-tooltip {
  color: grey;
  cursor: pointer;
}
</style>
